<html>
	<head>
		<title>
				Kasahorow virtual keyboard demo
		</title>
		<script src="vk_loader.js?vk_layout=African%20Keyboard" type="text/javascript"></script>
		<script type="text/javascript" language="javascript">
			var delay_hide_id;
			function get_element_left_position(element){
				var left=0;
				if(element.offsetParent){
					while(element.offsetParent)
					{
						left+=element.offsetLeft;
						element=element.offsetParent;
					}
					left+=element.offsetLeft;
				}
				else if(element.x){
					left+=element.x;
				}
				return left;
			}

			function get_element_top_position(element){
				var top=0;
				if(element.offsetParent){
					while(element.offsetParent)
					{
						top+=element.offsetTop;
						element=element.offsetParent;
					}
					top+=element.offsetTop;
				}
				else if(element.y){
					top+=element.y;
				}
				return top;
			}
			function delay_hide_keyboard(ev){
    			delay_hide_id = window.setTimeout(hide_keyboard,500);
			}
			function cancel_delay_hide_keyboard(){
	 			if(delay_hide_id>=0)
        			window.clearTimeout(delay_hide_id);
				delay_hide_id=-1;
			}
			function hide_keyboard(ev){
				VirtualKeyboard.hide();
				var kb = document.getElementById('_divkeyboard');
				kb.style.visibility="hidden";
				return false;
			}
			function show_keyboard_layout(input){
				cancel_delay_hide_keyboard();
				var kb = document.getElementById('_divkeyboard');
				kb.style.visibility="visible";
			}
			function show_keyboard(ev, ctrl){
				ev = ev || window.event;
				var target = ev.target || ev.srcElement;
				cancel_delay_hide_keyboard();
				var kb=document.getElementById('_divkeyboard');
				kb.style.visibility="visible";
				var left=get_element_left_position(target);
				var top=get_element_top_position(target);
				if((left+target.offsetWidth + kb.offsetWidth+5)>document.body.offsetWidth){
					top+=(target.offsetHeight + 5);
				}
				else{
					left+=target.offsetWidth+5;
					top-=5;
				}
				kb.style.top=top+"px";
				kb.style.left=left+"px";
				var isOpen = VirtualKeyboard.isOpen();
				if(!isOpen){
					VirtualKeyboard.show(ctrl.id,'_divkeyboard');
				}
				VirtualKeyboard.attachInput(ctrl);
				return false;
			}
			function handle_keypress(ev, ctrl){
				ev = ev || window.event;
				var keycode = window.event?ev.keyCode:ev.which;
				var target   = ev.target || ev.srcElement;
				if(keycode == 9){	//overwrite how the tab key is handled.
					hide_keyboard(ev);
					return true;
				}
    			return false;
			}

			document.write("<div id='_divkeyboard' style='position:absolute; z-index:10; visibility: hidden; background-color:white;border:solid 1px #dddddd;top:10px;width:400px;height:165px;padding:5px'></div>");
		</script>
</head>
<body>
	<form>
		<table>
			<tr>
				<td>
					First Name:
				</td>
				<td>
					<input name="firstname" id="firstname" type="text" size="50" onkeydown="handle_keypress(event,this);" onfocus="show_keyboard(event,this);"/>
				</td>
			</tr>
			<tr>
				<td>
					Last Name:
				</td>
				<td>
					<input name="lastname" id="lastname" type="text" size="50" onkeydown="handle_keypress(event,this);" onfocus="show_keyboard(event,this);" />
				</td>
			</tr>
			<tr>
				<td>
					Email:
				</td>
				<td>
					<input name="email" id="email" type="text" size="50" onkeydown="handle_keypress(event,this);" onfocus="show_keyboard(event,this);" />
				</td>
			</tr>
			<tr>
				<td>
					Comments:
				</td>
				<td>
						<textarea name="firstname" id="firstname" type="text" cols="40" rows="6" wrap="soft" onkeydown="handle_keypress(event,this);" onfocus="show_keyboard(event,this);"></textarea>
				</td>
			</tr>
			<tr>
				<td>
					&nbsp;
				</td>
				<td>
					<input name="submit" id="submit" type="submit" value="Submit"/>
				</td>
			</tr>
		</table>
	</form>
</body>
</html>
